<!DOCTYPE html>

<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<script src="$!{basePath}/app/js/vue.min.js"></script>
		<script src="$!{basePath}/app/js/axios.min.js"></script>
		<style type="text/css">
			html {
				font-size: 100px;
			}
			body,
			a,
			ul,
			li {
				padding: 0;
				margin: 0;
				list-style: none;
				text-decoration: none;
			}
			body {
				/*width: 100%;*/
				background: rgb(240, 240, 240);
				font-family: .PingFangSC-Regular;
			}
			div {
				box-sizing: border-box;
			}
			.header {
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				z-index: 10;
			}
			.head {
				font-size: 0.16rem;
				height: 0.44rem;
				background: #26A69A;
				color: white;
				text-align: center;
				line-height: 0.44rem;
			}
			.head>a {
				color: white;
				float: left;
				margin-left: 0.12rem;
			}
			.nav {
				height: 0.44rem;
				background: white;
				font-size: 0.12rem;
				line-height: 0.44rem;
				padding-left: 0.28rem;
			}
			.nav>ul>li {
				float: left;
				margin: 0px 0.15rem;
				width: 16%;
				text-align: center;
			}
			.content {
				margin-top: 1rem;
			}
			.cell1 {
				height: 1.59rem;
				background: white;
				font-size: 0.12rem;
				margin-top: 0.13rem;
			}

			.title {
				height: 0.44rem;
				border-bottom: 1px solid #D8D8D8;
				padding-left: 0.12rem;
				padding-right: 0.12rem;
			}

			.title>span {
				float: right;
				font-size: 0.09rem;
				color: #A4A3A3;
			}
			.cell {
				height: 0.96rem;
				background: white;
				border-bottom: 1px solid #D8D8D8;
				padding: 0.12rem 0;
			}
			.cell>.img {
				width: 1.27rem;
				height: 0.72rem;
				float: left;
				margin-left: 0.12rem;
			}
			/*.content{
overflow: scroll;
}*/
			.cell>.text {
				width: 2.12rem;
				margin-right: 0.12rem;
				float: right
			}
			.cell>.text>span {
				display: block;
			}
			.cell .intro {
				font-size: 0.1rem;
				color: #A4A3A3;
			}
			.cell .spay {
				font-size: 0.09rem;
				color: #A4A3A3;
			}
			.cell .pay {
				color: #26A69A;
				font-size: 0.1rem;
			}
			.footer {
				height: 0.32rem;
				padding: 0.1rem;
				text-align: center;
			}
			.footer>.btn {
				float: right;
			}
			.option {
				width: 0.65rem;
				border: 1px solid #26A69A;
				border-radius: 2px;
				float: left;
				margin-left: 0.07rem;
			}
			.title{
				border-bottom: 2px solid #e1e1e1;
			}
			.on{
				color: #09f;
				border-bottom: 1px solid #09f;
			}
			 .hide{display:none;}
		</style>


	</head>
	<body>
		<div class="wrap">
			<div class="header">
			<div id = "tab" class="nav">
			     <ul class="title">
					 <li :class="[index=='0' ? 'on':'off']" @click="dom(0)">全部</li>
					 <li :class="[index=='1' ? 'on':'off']" @click="dom(1)">未付款</li>
					 <li :class="[index=='2' ? 'on':'off']" @click="dom(2)">已付款</li>
			     </ul>
			 
				 <div  :class="[index=='0'?'show':'hide']" >
					  <!-- {{obj.context}} -->
				 </div>
				 <div :class="[index=='1' ?'show':'hide']">
					<!-- <li v-for="item in obj.lstCourse"><a href = "#">{{item.videoName}}</a></li> -->
				 </div>
				 <div  :class="[index=='2' ? 'show':'hide']">
				 					<!-- <li v-for="item in obj.lstCourse"><a href = "#">{{item.videoName}}</a></li> -->
				 </div>
			 </div>
				
			</div>
			<div class="content">
		</div>
		</div>
		</div>
		</div>
		</div>
		<script>
			autoSize();
			window.onresize = function() {
				autoSize();
			}

			function autoSize() {
				// 获取当前浏览器的视窗宽度，放在w中
				var w = document.documentElement.clientWidth;
				// 计算实际html font-size大小
				var size = w * 100 / 375;
				// 获取当前页面中的html标签
				var html = document.querySelector('html');
				// 设置字体大小样式
				html.style.fontSize = size + 'px';

			}
			// window.onload = function(){
			//
			//   }
			  var app=new Vue({
				  el:".wrap",
				  data:{
					  openId:"",
					  index:0,
					  status:""
				  },
				  mounted(){
				  	// this.dom()
					  axios("/system/back/poster/manage/getWxUserInfo.do").then((res)=>{
					  	console.log(res)
						  // this.openId=res.data.obj.openid;
						  this.getdata(this.status)
					  })
				  },
				  methods:{
				  	dom(i){
				  		this.index=i
						if(i==0){
							this.status=""
						}else if(i==1){
							this.status=0
						}else{
							this.status=2
						}
						// var myTab = document.getElementById("tab");    //整个div
						// var myUl = myTab.getElementsByTagName("ul")[0];//一个节点
						// var myLi = myUl.getElementsByTagName("li");    //数组
						// var myDiv = myTab.getElementsByTagName("div"); //数组
						// console.log(myLi)
						// console.log(myDiv)
						// for(var j = 0; j < myLi.length; j++){
						// 	console.log(myLi[j])
						// 	// myLi[j].className="off";
						// 	// myDiv[j].className = "hide";
						// }
						// myLi[i].className = "on";
						// myDiv[i].className = "show";
					},
				  	getdata(status){
				  		axios({
							url:"../../system/back/order/all/findByopenId",
							method:"get",
							params:{
								openId:'oNWAO58yq1-o2Ylydn7gmiC0-_Vk',
								payStatus:status
							}
						}).then((res)=>{
							console.log(res)
						})
					}
				  }
			  })
		</script>

	</body>

</html>
